search: Make the results take more horizontal space

In order to make gnome-shell search functionality fit on
smaller screens, like those of devices, search results
need to take advantage of more horizontal space so that
any extra space can be used efficiently.

In order to do so, change the layout of the ListSearchResult
class from a vertical one, to a horizontal one and also
decrease the padding of the list-search-result-content css
class.

https://bugzilla.gnome.org/show_bug.cgi?id=749957

diff --git a/data/theme/gnome-shell-high-contrast.css b/data/theme/gnome-shell-high-contrast.css
index a388ef0413c6d77d39203d738e39f12a510ae5a1..d639e309405169cf610e974438f50f1b2420d873 100644 (file)
--- a/data/theme/gnome-shell-high-contrast.css
+++ b/data/theme/gnome-shell-high-contrast.css
@@ -1179,12 +1179,12 @@ StScrollBar {
   height: 1px; }
 
 .list-search-result-content {
-  spacing: 12px;
-  padding: 12px; }
+  spacing: 30px; }
 
 .list-search-result-title {
   font-size: 1.5em;
-  color: #e2e2df; }
+  color: #e2e2df;
+  spacing: 12px; }
 
 .list-search-result-description {
   color: #cacac4; }

diff --git a/data/theme/gnome-shell-sass b/data/theme/gnome-shell-sass
index 4de529843779532db8e5aa76b4e8a74f163e79c5..6a5935538568835462fa853f746620967d047bcf 160000 (submodule)
--- a/data/theme/gnome-shell-sass
+++ b/data/theme/gnome-shell-sass
@@ -1 +1 @@
-Subproject commit 4de529843779532db8e5aa76b4e8a74f163e79c5
+Subproject commit 6a5935538568835462fa853f746620967d047bcf

diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 6f9f2013236c8c5075614f1cb7266a5ab8a0157f..6d5559a2d30cdf5db644525ff04033f16435f9ef 100644 (file)
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -1179,12 +1179,12 @@ StScrollBar {
   height: 1px; }
 
 .list-search-result-content {
-  spacing: 12px;
-  padding: 12px; }
+  spacing: 30px; }
 
 .list-search-result-title {
   font-size: 1.5em;
-  color: #e2e2df; }
+  color: #e2e2df;
+  spacing: 12px; }
 
 .list-search-result-description {
   color: #cacac4; }

diff --git a/js/ui/search.js b/js/ui/search.js
index 4d29e59efbefc04e77f1c8985759b5ffb357626e..0dd4870ff2a1b9f4d1b75f0bfadbfd8ce710b41b 100644 (file)
--- a/js/ui/search.js
+++ b/js/ui/search.js
@@ -84,33 +84,34 @@ const ListSearchResult = new Lang.Class({
                                          vertical: false });
         this.actor.set_child(content);
 
+        let titleBox = new St.BoxLayout({ style_class: 'list-search-result-title' });
+
+        content.add(titleBox, { x_fill: true,
+                                y_fill: false,
+                                x_align: St.Align.START,
+                                y_align: St.Align.MIDDLE });
+
         // An icon for, or thumbnail of, content
         let icon = this.metaInfo['createIcon'](this.ICON_SIZE);
         if (icon) {
-            content.add(icon);
+            titleBox.add(icon);
         }
 
-        let details = new St.BoxLayout({ vertical: true });
-        content.add(details, { x_fill: true,
-                               y_fill: false,
-                               x_align: St.Align.START,
-                               y_align: St.Align.MIDDLE });
-
-        let title = new St.Label({ style_class: 'list-search-result-title',
-                                   text: this.metaInfo['name'] })
-        details.add(title, { x_fill: false,
-                             y_fill: false,
-                             x_align: St.Align.START,
-                             y_align: St.Align.START });
+        let title = new St.Label({ text: this.metaInfo['name'] });
+        titleBox.add(title, { x_fill: false,
+                              y_fill: false,
+                              x_align: St.Align.START,
+                              y_align: St.Align.MIDDLE });
         this.actor.label_actor = title;
 
         if (this.metaInfo['description']) {
-            let description = new St.Label({ style_class: 'list-search-result-description' });
-            description.clutter_text.set_markup(this.metaInfo['description']);
-            details.add(description, { x_fill: false,
+            let description = new St.Label({ style_class: 'list-search-result-description',
+                                             text: this.metaInfo['description'] });
+
+            content.add(description, { x_fill: false,
                                        y_fill: false,
                                        x_align: St.Align.START,
-                                       y_align: St.Align.END });
+                                       y_align: St.Align.MIDDLE });
         }
     }
 });